<template>
  <div class="buy-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>广告收益</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/advertising_revenue' }">广告收益统计</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/using_balance' }">购买中心</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="data-page">
      <div class="data-info">
        <el-avatar class="avatar" :size="50" :src="circleUrl" />
        <div>
          <el-button round size="small" color="#0071bb" @click="bugList()">购买记录</el-button>
          <div class="money">
            可用余额：
            <span>200元</span>
          </div>
        </div>
      </div>
      <div class="data-title">服务应用：</div>

      <div class="data-list">
        <div v-for="v of 7" :key="v">
          应用
          <br />待植入
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="60%" top="5vh">
      <div class="from-title" >购买记录</div>
      <div class="head">
        <div class="choice-list">
          <div class="choice-item">
            <div class="choice-title">按时间段</div>
            <el-date-picker
              v-model="detailTime"
              type="date"
              placeholder="请选择"
              style="width: 160px;"
              :suffix-icon="CaretBottom"
            />
          </div>
          <div class="choice-item">
            <div class="choice-title">业务类型</div>
            <el-select v-model="seachDetails" placeholder="请选择">
              <el-option
                v-for="i in detailsOptions"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </div>
          <div class="btn">
            <el-button round :icon="Search" color="#0071bb">搜索</el-button>
          </div>
          <div class="btn">
            <el-button round color="#0071bb">导出</el-button>
          </div>
        </div>
        <div class="tables">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="order" label="订单号" />
            <el-table-column prop="content" label="业务内容" />
            <el-table-column prop="money" label="实付金额" />
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="remarks" label="备注" />
          </el-table>
        </div>
        <div class="page_number">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :size="size"
            :disabled="disabled"
            layout="prev, pager, next, jumper,total"
            :total="10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { ComponentSize } from 'element-plus'
	import { Search,CaretBottom } from '@element-plus/icons-vue'
const circleUrl = ref( 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');
const dialogVisible = ref(false)
const tableData = [
		{
			order: 'JOG146516131321354132154',
			content: '应用购买',
			money: '100.00',
			date: '2024-05-20',
			remarks: '乐汇有奖',
		},
    {
			order: 'JOG146516131321354132154',
			content: '应用购买',
			money: '100.00',
			date: '2024-05-20',
			remarks: '乐汇有奖',
		},
    {
			order: 'JOG146516131321354132154',
			content: '应用购买',
			money: '100.00',
			date: '2024-05-20',
			remarks: '乐汇有奖',
		},
    {
			order: 'JOG146516131321354132154',
			content: '应用购买',
			money: '100.00',
			date: '2024-05-20',
			remarks: '乐汇有奖',
		},
    {
			order: 'JOG146516131321354132154',
			content: '应用购买',
			money: '100.00',
			date: '2024-05-20',
			remarks: '乐汇有奖',
		},
    {
			order: 'JOG146516131321354132154',
			content: '应用购买',
			money: '100.00',
			date: '2024-05-20',
			remarks: '乐汇有奖',
		},
	]
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)

  const detailTime= ref('')
	const seachDetails= ref('')
	const detailsOptions =ref([{
		label:"label1",
		value:1
	}])
  const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
  const bugList = () => {
		dialogVisible.value=true
	}
  // 

</script>
<style lang="scss">
</style>
<style scoped lang="scss">
.buy-page {
  padding: 20px 10px;
  padding-bottom: 0px;
  background-color: #fff;
  background-color: #f0f0f0;
}
.data-page {
  background-color: #fff;
  margin-top: 20px;

  .data-info {
    width: 100%;
    padding: 24px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: start;
    .avatar {
      margin-right: 10px;
    }
    .money {
      font-size: 10px;
      color: #808080;
      > span {
        color: black;
        font-size: 18px;
        font-weight: bolder;
      }
    }
  }
  .data-title {
    background: #0071bb;
    color: #fff;
    font-size: 12px;
    padding: 10px 20px;
  }
  .data-list {
    display: flex;
    justify-content: center;
    align-items: center;
    > div {
      background: #f0a93e;
      color: #fff;
      width: 7%;
      height: 100px;
      padding: 24px;
      text-align: center;
      margin: 36px;
      border-radius: 15px;
    }
  }
}
.choice-list {
  display: flex;
  flex-wrap: wrap;

  .choice-item {
    width: 20%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .el-select {
      width: 160px;
    }

    .choice-title {
      font-size: 12px;
      width: 120px;
      text-align: center;
    }

    .rounded-input {
      width: 160px;
    }
  }
}

.btn {
  margin-left: 10px;
}
.table-btn {
  color: #519ed0;
  cursor: pointer;
}
.from-title {
  font-weight: bold;
  margin: 10px;
  font-size: 18px;
}
:deep() {
  th {
    background-color: #fff !important;
    color: #666666 !important;
  }
}
</style>